<template>
	<view>
		<club-navbar></club-navbar>
		<scroll-view style="background-color:#EEEEEF;" scroll-y :style="{height:scrollHeight+'px'}">
			<!-- 热门社团 -->
			<view class="content-data">
				<view class="classify">热门社团</view>
				<scroll-view scroll-x>
					<club-list :clubList="hotClubList"></club-list>
				</scroll-view>
			</view>
			<!-- 全部社团 -->
			<view class="bg-white" style="margin-top: 20rpx;">
				<view class="classify">全部社团</view>

				<view style="display: flex;flex-wrap: wrap;">
					<club-list :isAll="false" :clubList="allClubList"></club-list>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import clubNavbar from "../../components/club/club-navbar.vue";
	import clubList from "../../components/club/club-list.vue";
	export default {
		components: {
			clubNavbar,
			clubList
		},
		data() {
			return {
				scrollHeight: this.swiperHeight - 43,
				hotClubList: [],
				allClubList: [{
					title: "英语协会",
					movementNum: 100,
					cover: "https://img2.baidu.com/it/u=2183941555,124415608&fm=26&fmt=auto&gp=0.jpg",
				}],
				page: 1,
				rows: 80
			}
		},
		onShow() {
			var that = this
			//得到热点数据
			uni.request({
				url: that.url.club.hotClubList,
				method: 'GET',
				header: {},
				success: (res) => {
					console.log(res)
					that.hotClubList = res.data.hotClub
					console.log(that.hotClubList)
				},
				fail: (res) => {
					console.log(res)
				}
			});

			// 得到所有社团
			uni.request({
				url: that.url.club.list,
				method: 'GET',
				header: {},
				success: (res) => {
					console.log(res)
					that.allClubList = res.data.list
					console.log(that.allClubList)
				},
				fail: (res) => {
					console.log(res)
				}
			});
		},
		methods: {
		}
	}
</script>

<style>
	.content-data {
		background-color: #FFFFFF;
		padding: 10rpx 0 0 0;
	}

	.classify {
		font-size: 36rpx;
		font-weight: 800;
		padding: 10rpx;
		width: 160rpx;
		border-bottom: 5rpx solid #18B566;
	}

	.association-box {
		position: relative;
		width: 25%;
		height: 250rpx;
		padding: 10rpx 0;
		transition: all .25s linear;
		border-radius: 20rpx;
	}

	.association-box-content {
		width: 90%;
		margin: auto;
		background-color: #FFFFFF;
		height: 230rpx;
		padding: 30rpx 0 10rpx 0;
	}

	.tag {
		position: absolute;
		top: 5rpx;
		right: 5rpx;
		padding: 10rpx;
		border-radius: 20rpx;
	}
</style>
